<template>
  <div class="layout-header">
    <div class="links-left">
      <Button type="text" @click="toggleClick" :class="{'rotate' : shrinkBtn}" style="box-shadow:none;">
        <Icon type="navicon" size="32"></Icon>
      </Button>
    </div>
    <div class="links-right">
      <!-- 搜索 -->
      <!-- <div class="menu-item">
        <HeaderSearch :dataSource="['搜索提示一','搜索提示二','搜索提示三']" placeholder="站内搜索" @onPressEnter="enter" @onChange="change" @onSearch="search"></HeaderSearch>
      </div> -->
      <!-- 切换中英文 -->
      <div class="menu-item">
        <ButtonGroup>
          <Button type="ghost" size="small" @click="handleSwitch('en-US')">EN</Button>
          <Button type="ghost" size="small" @click="handleSwitch('zh-CN')">CN</Button>
        </ButtonGroup>
      </div>
      <!-- <div class="menu-item">
        <NoticeIcon :count="totalCount" :data="notices" :colors="colors" @onItemClick="msgClicked" @onClear="clear"></NoticeIcon>
      </div> -->
      <div class="menu-item">
        <img style="width: 32px; height: 32px;border-radius: 50%;" :src="avatar" />
      </div>
      <div class="menu-item">
        <Dropdown placement="bottom-end">
          <span>
            {{user}}
          </span>
          <DropdownMenu slot="list">
            <DropdownItem @click.native="userInfoWrap=!userInfoWrap">个人信息</DropdownItem>
            <DropdownItem @click.native="changePwdWrap=!changePwdWrap">修改密码</DropdownItem>
            <DropdownItem @click.native="loginOut">退出</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
      <Modal class="userInfoModal" title="个人信息" 
        v-model="userInfoWrap"
        class-name="vertical-center-modal">
          <ul class="userInfo">
            <li>
              <Icon size="19" type="social-reddit"></Icon>
              用户名: {{userInfoDetail.username}}
            </li>
            <li>
              <Icon size="18" type="person"></Icon>
              user ID: {{userInfoDetail.userId}}
            </li>
            <li>
              <Icon size="19" type="ios-telephone"></Icon>
              电 &nbsp;&nbsp;&nbsp;&nbsp;话: {{userInfoDetail.mobile}}
            </li>
            <li>
              <Icon size="19" type="ios-email"></Icon>
              邮 &nbsp;&nbsp;&nbsp;&nbsp;箱: {{userInfoDetail.email}}
            </li>
            <li>
              <Icon size="18" type="ios-clock"></Icon>
              创建时间: {{userInfoDetail.createTime | formatDate}}
            </li>
          </ul>
      </Modal>
      <Modal title="修改密码"
        v-model="changePwdWrap"
        class-name="vertical-center-modal"
        @on-ok="changePwd">
         <Form ref="formCustom" v-model="formCustom" :rules="ruleCustom" :label-width="80">
            <FormItem label="原密码" prop="password">
              <Input type="password" v-model="formCustom.password" placeholder="请输入原密码" style="width: 300px"></Input>
            </FormItem>
            <FormItem label="新密码" prop="newPassword">
              <Input type="password" v-model="formCustom.newPassword" placeholder="请输入新密码" style="width: 300px"></Input>
            </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>
<script>
import {Api,baseUrl} from './../libs/Api'
import {formatDate} from './../libs/date.js'
import { NoticeIcon } from '@/components/NoticeIcon'
import { HeaderSearch } from '@/components'
export default {
  name: 'TopNav',
  components: { NoticeIcon, HeaderSearch },
  data() {
     const validatePass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入原密码'));
        } else {
            if (this.formCustom.newPassword !== '') {
                // 对第二个密码框单独验证
                this.$refs.formCustom.validateField('newPassword');
            }
            callback();
        }
    };
    const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入新密码'));
        } else if (value == this.formCustom.password) {
            callback(new Error('新密码与原密码相同'));
        } else {
            callback();
        }
    };
    return {
      shrinkBtn:false,
      avatar: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
      lang: 'zh-CN',
      user: '用户',
      userInfoWrap:false,
      userInfoDetail:'',
      changePwdWrap:false,
      formCustom:{
        password:'',
        newPassword:'',
      },
      ruleCustom:{
        password: [
            { validator: validatePass, trigger: 'blur' }
        ],
        newPassword: [
            { validator: validatePassCheck, trigger: 'blur' }
        ],
      },
      colors: {
        todo: 'default',
        processing: 'blue',
        urgent: 'red',
        doing: 'yellow'
      },
      notices: [
        {
          title: '通知',
          // emptyText: '你已查看所有通知',
          // emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
          msg: [
            {
              id: '000000001',
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
              title: '你收到了 14 份新周报',
              datetime: '2017-08-09',
              read: false,
              type: '通知'
            },
            {
              id: '000000002',
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
              title: '你推荐的 曲妮妮 已通过第三轮面试',
              datetime: '2017-08-08',
              read: false,
              type: '通知'
            },
            {
              id: '000000003',
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
              title: '这种模板可以区分多种通知类型',
              datetime: '2017-08-07',
              read: true,
              type: '通知'
            },
            {
              id: '000000004',
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
              title: '左侧图标用于区分不同的类型',
              datetime: '2017-08-07',
              read: false,
              type: '通知'
            },
            {
              id: '000000005',
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
              title: '内容不要超过两行字，超出时自动截断',
              datetime: '2017-08-07',
              read: false,
              type: '通知'
            }
          ]
        },
        {
          title: '消息',
          emptyText: '您已读完所有消息',
          emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg',
          msg: [
            {
              id: '000000006',
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
              title: '曲丽丽 评论了你',
              description: '描述信息描述信息描述信息',
              datetime: '2017-08-07',
              read: false,
              type: '消息'
            },
            {
              id: '000000007',
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
              title: '朱偏右 回复了你',
              description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
              datetime: '2017-08-07',
              read: false,
              type: '消息'
            },
            {
              id: '000000008',
              avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
              title: '标题',
              description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
              datetime: '2017-08-07',
              read: false,
              type: '消息'
            }
          ]
        },
        {
          title: '待办',
          emptyText: '你已完成所有待办',
          emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg',
          msg: [
            {
              id: '000000009',
              title: '任务名称',
              description: '任务需要在 2017-01-12 20:00 前启动',
              extra: '未开始',
              status: 'todo',
              read: false,
              type: '待办'
            },
            {
              id: '000000010',
              title: '第三方紧急代码变更',
              description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
              extra: '马上到期',
              status: 'urgent',
              read: false,
              type: '待办'
            },
            {
              id: '000000011',
              title: '信息安全考试',
              description: '指派竹尔于 2017-01-09 前完成更新并发布',
              extra: '已耗时 8 天',
              status: 'doing',
              read: false,
              type: '待办'
            },
            {
              id: '000000012',
              title: 'ABCD 版本发布',
              description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
              extra: '进行中',
              read: false,
              status: 'processing',
              type: '待办'
            }
          ]
        }
      ]
    }
  },
  filters: {
      formatDate(time) {
          let date = new Date(time);
          return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
  },
  mounted(){
    Api.userInfo().then(res => {
      if(res.data.code=='0'){
        this.userInfoDetail=res.data.user;
        this.user=res.data.user.username;
      }
    })
  },
  computed: {
    totalCount() {
      let count = 0
      this.notices.forEach(item => {
        item.msg.forEach(msg => {
          !msg.read && count++
        })
      })
      return count
    }
  },
  methods: {
    //退出
    loginOut(){
      Api.loginOut().then(res => { 
        console.log(res)
        this.$router.push('/user/login')
      })
    },
    //修改密码
    changePwd(){
      Api.changePwd(this.formCustom.password,this.formCustom.newPassword).then(res => {
        if(res.data.code=='0'){
          this.$Message.info({content:'密码修改成功，请重新登录',duration:10});
          this.$router.push({path:'/user/login'})
        }else{
          this.$Message.error(res.data.msg);
        }
      })
    },
    toggleClick() {
      this.shrinkBtn = !this.shrinkBtn;
      this.$emit('menu-toggle')
    },
    handleSwitch(lang) {
      this.lang = lang
      localStorage.lang = lang
      this.$store.commit('switchLang', lang)
    },
    msgClicked(msgIndex, tabIndex) {
      this.notices[tabIndex].msg[msgIndex].read = true
      console.log(this.notices[tabIndex].msg[msgIndex].read)
    },
    clear(index) {
      // console.log(this.notices[index].msg)
      this.notices[index].msg.splice(0, this.notices[index].msg.length)
      this.$Message.success('清空了' + this.notices[index].title)
    },
    search(value) {
      console.log('this is onSearch', 'keyword: ' + value)
    },
    enter(value) {
      console.log('this is onEnter', 'keyword:' + value)
    },
    change(value) {
      console.log('this is onChange', 'keyword: ' + value)
    }
  },
  created() {
    this.lang = localStorage.lang || 'zh-CN'
  }
}
</script>
<style>
.ivu-btn-text:focus{box-shadow:none;}
.layout-header {
  height: 50px;
  line-height:50px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding-right: 16px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: relative;
  border-bottom: 1px solid rgba(0, 21, 41, 0.08);
}
.userInfoModal .ivu-modal-footer button:first-child{
  display: none;
}
.userInfo{
  padding:5px 15px 20px 15px;
  background: rgba(0, 21, 41, 0.08);
  font-size: 15px;
}
.userInfo li{
  height:40px;
  line-height:45px;
  list-style: none;
  border-bottom:1px dashed #b1b2b5;
}
.userInfo li .ivu-icon{
  color:#2d8cf0;
}
.links-right {
  display: flex;
}
.ivu-dropdown-rel{cursor:pointer;}
.menu-item {
  padding: 0 8px;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rotate{
  transform: rotate(90deg);
  transition:transform .3s;
}
</style>
